<template>
  <div class="investment box-bg pointer" @click="goTo">
    <TitleLable label="投资阶段"> </TitleLable>
    <el-row type="flex" justify="end" align="middle" class="tip">
      <div></div>
      <div>项目数量（个）</div>
    </el-row>
    <div class="chart" ref="investmentChart"></div>
    <div class="label">
      <div>阶段</div>
      <div class="m-t-12">占比</div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import TitleLable from "../TitleLable/index.vue";

export default {
  name: "Investment",
  components: { TitleLable },
  data() {
    return {
      myChart: null,
      list: [
        { label: "入库", value: 1, rate: 12.5 },
        { label: "立项", value: 2, rate: 25 },
        { label: "尽调", value: 4, rate: 50 },
        { label: "审查", value: 0, rate: 0 },
        { label: "决策", value: 1, rate: 12.5 },
        { label: "交割", value: 0, rate: 0 },
        // { label: "移交", value: 0, rate: 0 },
      ],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const list = this.list;
      this.myChart = echarts.init(this.$refs.investmentChart);
      const option = {
        grid: { left: 0, right: 0, bottom: 71, top: 20 },
        xAxis: {
          type: "category",
          axisLabel: {
            show: true,
            margin: 13,
            interval: 0,
            formatter: (value, index) => {
              return [`{a|${value}}`, `{b|${list[index].rate}%}`].join("\n");
            },
            rich: {
              a: { fontSize: 14, color: "#BCC4D3" },
              b: {
                fontSize: 14,
                height: 40,
                fontWeight: 600,
                color: "#58b2ff",
              },
            },
          },
          axisLine: { show: true },
          splitLine: { show: false },
          axisTick: { show: false },
          data: list.map((i) => i.label),
        },
        yAxis: [
          {
            type: "value",
            axisLabel: { show: false },
            axisLine: { show: false },
            splitLine: { show: false },
            axisTick: { show: false },
          },
        ],
        series: [
          {
            name: "值",
            type: "bar",
            label: {
              show: true,
              position: "top",
              color: "#BCC4D3",
              formatter: (data) => {
                if (!data.value) return "";
                return data.value;
              },
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  { offset: 0, color: "#0CA5C8" },
                  { offset: 0.96, color: "rgba(12, 165, 200, 0)" },
                  { offset: 1, color: "#0CA5C8" },
                ]),
              },
            },
            barWidth: 16,
            data: list,
          },
        ],
      };
      this.myChart.setOption(option);
    },
    goTo() {
      this.$message("进入平台：项目管理/在投项目卡");
    },
  },
};
</script>

<style lang="scss" scoped>
.investment {
  position: relative;
  height: 385px;
  .tip {
    padding: 12px;
    > div:first-child {
      width: 6px;
      height: 6px;
      margin-right: 6px;
      background: #0ba3c6;
    }
  }
  .chart {
    width: 340px;
    height: 300px;
    margin-left: 45px;
  }
  .label {
    position: absolute;
    left: 14px;
    bottom: 21px;
    z-index: 10;
    font-weight: bold;
    color: #ffffff;
  }
  .m-t-12 {
    margin-top: 11px;
  }
}
</style>
